import { InboxOutlined } from '@ant-design/icons';
import { message, Modal, UploadProps } from 'antd'
import Dragger from 'antd/es/upload/Dragger';
import Examine from '../page/knowledge/components/Examine';
import { useRef, useState } from 'react';

interface Props {
    onClose: () => void
    open: boolean
}

export default function FileUpload(props: Props) {
    const { open, onClose } = props
    const [examine, setExamine] = useState(false)
    const [markdown, setMarkdown] = useState("")

    const draggerProps: UploadProps = {
        name: 'file',
        multiple: true,
        action: import.meta.env.VITE_LLM_API_API + "/convert",
        onChange(info) {
            const { status } = info.file;
            if (status !== 'uploading') {
            }
            if (status === 'done') {
                setMarkdown(info.fileList.map(item => item.response.data).join())
                message.success("上传成功")
            } else if (status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
        onDrop(e) {
            console.log('Dropped files', e.dataTransfer.files);
        },
    };

    return (
        <>
            <Modal title="文件导入"
                open={open}
                onCancel={onClose}
                okText="分块"
                onOk={() => setExamine(true)}>
                <Dragger {...draggerProps}>
                    <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                    </p>
                    <p className="ant-upload-text">拖拽文件至此，或者点击选择文件</p>
                    <p className="ant-upload-hint">
                        已支持 TXT、 MARKDOWN、 PDF、 HTML、 XLSX、 XLS、 DOCX、 CSV，每个文件不超过 15MB。
                    </p>
                </Dragger>
            </Modal>
            <Examine open={examine} onChange={setExamine} markdown={markdown} />
        </>
    )
}

